<template>
  <div>
    <h2 class="van-doc-block__title">账单明细</h2>

    <van-card :key="data.gascardId" :title="'账单编号:' + data.billNo">
      <template #price>
        <div>支付金额：￥{{data.payPrice}}</div>
        <div>支付时间：{{formatDate(data.payTime)}}</div>
      </template>
    </van-card>

    <van-card
      v-if="data.carList.length > 0"
      v-for="item in data.carList"
      :key="item.carId"
    >
      <template #price>
        <div v-if="item.tcYcbt">套餐基础金额：￥{{item.tcYcbt}}</div>
        <div v-if="item.tcYkcz">套餐油卡充值金额	：￥{{item.tcYkcz}}</div>
        <div v-if="item.tcYkzr">套餐油卡转让金额	：￥{{item.tcYkzr}}</div>
        <div v-if="item.tcje">套餐金额：￥{{item.tcje}}</div>
        <div v-if="item.jcfwf">基础服务费：￥{{item.jcfwf}}</div>
      </template>
      <template #desc>
        <div>车牌号：{{item.carPlate}}</div>
        <div>车主：{{item.ownerName}}</div>
      </template>
    </van-card>

  </div>
</template>

<script>
  import vanFieldSelect from "@/components/form/template/van-field-select";
  import {Toast} from "vant";

  export default {
    name: "index",
    data() {
      return {
        billNo: '',
        data: {}
      };
    },
    components: {
      vanFieldSelect
    },
    created() {
      this.billNo = this.$route.query.billNo;
      this.getData();
    },
    methods: {
      getData() {
        let data = {
          billNo: this.billNo
        };
        this.$Api.get("/api/bill/getBillInfo", data).then(res => {
          if (res.data.code == 200) {
            this.data = res.data.data;
          } else {
            Toast(res.data.message);
          }
        }).catch(err => {
        });
      },
      formatDate(a) {
        let now = new Date(a);
        let year = now.getFullYear(); //取得4位数的年份
        let month = now.getMonth() + 1; //取得日期中的月份，其中0表示1月，11表示12月
        let date = now.getDate(); //返回日期月份中的天数（1到31）

        return year + "-" + month + "-" + date;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .van-doc-block__title {
    margin: 0;
    padding: 24px 16px 16px;
    color: #09f;
    font-weight: normal;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    border-bottom: 1px solid #09f;
  }
  .van-card__content {
    min-height: auto;
  }
  .van-card__bottom {
    margin-top: 10px;
  }
</style>
